<template>
	<div class="newCoupons">
		<div class="newCoupons_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">新增优惠券<i class="el-icon-close"></i></div>
		</div>
		<div class="newCoupons_title">
			<div class="newCoupons_title_left">优惠券/<i>新增优惠券</i></div>
			<div class="newCoupons_title_right">
				<button class="newCoupons_title_right_btn" @click="handerBase">返回</button>
			</div>
		</div>
		<div class="newCoupons_content">
			<div class="newCoupons_content_box">
				<div class="newCoupons_content_box_top">
					<div
					class="newCoupons_content_box_top_title"
					v-for="(v,i) in titleList" :key="i"
					@click="tabTitle(i)"
					:class="[titleIndex == i ? 'title_active' : '']"
					>{{v}}</div>
				</div>
				<form v-model="formbasic" class="form_basic">
					<!-- 基本 -->
					<div class="basic" v-if="basic">
						<!-- 排序 -->
						<div class="sorting">
							<div class="sorting_left">排序</div>
							<div class="sorting_right">
								<input type="text" v-model="formbasic.sort" />
								<p>数字越大越靠前</p>
							</div>
						</div>
						<!-- 优惠券名称 -->
						<div class="coupon_name" :class="{'coupon_active' : couponNames}">
							<div class="coupon_name_left">优惠券名称</div>
							<div class="coupon_name_right">
								<input type="text" v-model="formbasic.name" @blur="handerCouponName" />
							</div>
						</div>
						<!-- 分类 -->
						<div class="fication">
							<div class="fication_left">分类</div>
							<div class="fication_right">
								<el-select v-model="formbasic.type" placeholder="请选择">
								    <el-option value="1" label="优惠活动">优惠活动</el-option>
								    <el-option value="2" label="b">b</el-option>
								    <el-option value="3" label="c">c</el-option>
								  </el-select>
							</div>
						</div>
						<!-- 使用条件 -->
						<div class="use">
							<div class="use_left">使用条件</div>
							<div class="use_right">
								<input type="text" v-model="formbasic.condition" />
								<p>消费满多少可用，空或0不限制</p>
							</div>
						</div>
						<!-- 有效期 -->
						<div class="validity">
							<div class="validity_left">使用时间限制</div>
							<div class="validity_right">
								<div class="validity_right_top">
									<el-radio v-model="formbasic.time_type" label="1" border>获得后</el-radio>
									<input type="text" v-model="formbasic.date" :disabled="formbasic.time_type=='2'">
									<div class="validity_right_top_box">天内有效(空为不限时间使用)</div>
								</div>
								<div class="validity_right_bottom">
									<el-radio v-model="formbasic.time_type" label="2" border>在日期</el-radio>
									<el-date-picker
									    v-model="time"
									    type="daterange"
										:disabled="formbasic.time_type=='1'"
									    range-separator="至"
									    start-placeholder="开始日期"
									    end-placeholder="结束日期"
										:clearable="false">
									</el-date-picker>
									<div class="validity_right_bottom_box">内有效</div>
								</div>
							</div>
						</div>
						<!-- 优惠方式 -->
						<div class="way">
							<div class="way_left">优惠方式</div>
							<div class="way_right">
								<div class="way_right_top">
									<el-radio-group v-model="formbasic.discount_type" >
										<el-radio @change="handerRadio" label="1">立减</el-radio>
										<el-radio @change="handerRadio" label="2">打折</el-radio>
										<el-radio @change="handerRadio" label="3">返利</el-radio>
									</el-radio-group>
								</div>
								<div class="way_right_bottom">
									<div class="way_right_bottom_left">{{text}}</div>
									<div class="way_right_bottom_center">
										<input type="text" v-model="formbasic.discount_money">
									</div>
									<div class="way_right_bottom_left">元</div>
								</div>
							</div>
						</div>
						<!-- 发放总数 -->
						<div class="issue">
							<div class="issue_left">发放总数</div>
							<div class="issue_right">
								<input type="text" v-model="formbasic.num" />
								<p>优惠券总数量，没有不能领取或发放，-1为不限制张数</p>
							</div>
						</div>
						<div class="btn">
							<div class="btn_left"></div>
							<div class="btn_right">
								<!-- <button class="submit" @click="basicSubmit">提交</button> -->
								<button @click="save(1)">下一步</button>
							</div>
						</div>
					</div>

					<!-- 限制 -->
					<div class="limit" v-if="limit">
						<!-- 优惠使用限制 -->
						<div class="preferential">
							<div class="preferential_left">优惠使用限制</div>
							<div class="preferential_right">
								<el-radio v-model="formbasic.rule_type" label="1">无优惠使用限制</el-radio>
								<el-radio v-model="formbasic.rule_type" label="2">不可与促销优惠同时使用</el-radio>
								<el-radio v-model="formbasic.rule_type" label="3">不可与会员折扣同时使用</el-radio>
								<!-- <el-radio v-model="formbasic.rule_type" label="不可与促销优惠和会员优惠同时使用">不可与促销优惠和会员优惠同时使用</el-radio> -->
								<p>优惠券是否可以与特定优惠同时使用</p>
							</div>
						</div>
						<!-- 商品分类使用限制 -->
						<div class="classification">
							<div class="classification_left">商品分类使用限制</div>
							<div class="classification_right">
								<el-radio v-model="formbasic.is_cate_limit" label="0">不添加商品分类使用限制</el-radio>
								<el-radio v-model="formbasic.is_cate_limit" label="1">允许以下商品分类使用</el-radio>
								<p>优惠券是否可以与特定优惠同时使用</p>
							</div>
						</div>
						<!-- 选择商品分类 -->
						<div class="selectGoods">
							<div class="selectGoods_left">选择商品分类</div>
							<div class="selectGoods_right">
								<!-- 循环目标 -->
									<!-- <el-tag size="small" closable style="margin-left:5px;border-color:#606266;color:#000" color="#dee1e8">舌尖美食</el-tag> -->
								<div class="selectGoods_right_box" v-for="(item,index) in cateList" :key="index">
									<div class="selectGoods_right_box_down"><i class="el-icon-close"></i></div>
									<div class="selectGoods_right_box_title" @click="_pickCate">{{item.cate_name}}</div>
								</div>
							</div>
						</div>
						<!-- 商品使用限制 -->
						<div class="goodLimit">
							<div class="goodLimit_left">商品使用限制</div>
							<div class="goodLimit_right">
								<el-radio v-model="formbasic.is_product_limit" label="0">不添加商品限制</el-radio>
								<el-radio v-model="formbasic.is_product_limit" label="1">允许以下商品使用</el-radio>
							</div>
						</div>
						<!-- 选择商品 -->
						<div class="select_goods">
							<div class="select_goods_left">选择商品</div>
							<div class="select_goods_right">
								<div class="select_goods_right_top">
									<input type="text" v-model="formbasic.product_lst"><button>选择商品</button>
								</div>
								<div class="select_goods_right_bottom">添加限制的商品必须已上架，并且不属于砍价商品</div>
							</div>
						</div>
						<div class="limit_btn">
							<div class="limit_btn_left"></div>
							<div class="limit_btn_right">
								<button @click="save(0)" style="margin-right:30px">上一步</button>
								<button @click="save(2)">下一步</button>
							</div>
						</div>
					</div>
					<!-- 说明 -->
					<div class="instructions" v-if="instructions">
						<!-- 统一说明 -->
						<div class="unified">
							<div class="unified_left">是否使用统一说明</div>
							<div class="unified_right">
								<div class="unified_right_top">
									<el-radio v-model="formbasic.unified" :label="true">使用</el-radio>
									<el-radio v-model="formbasic.unified" :label="false">不使用</el-radio>
								</div>
								<div class="unified_right_bottom">
									统一说明在<i>【基础设置】</i>中设置，如果使用统一说明，则在优惠券前面显示统一说明
								</div>
							</div>
						</div>
						<!-- 使用说明 -->
						<div class="uses">
							<div class="uses_left">使用说明</div>
							<div class="uses_right">
								<div v-loading="loading"><!--上传图片时得加载画面-->
								<VueEditor style="width: 100%" 
									useCustomImageHandler 
									@imageAdded="handleImageAdded"
									v-model="formbasic.content"></VueEditor>
    							</div>
							</div>
						</div>
						<div class="instruct_btn">
							<div class="instruct_btn_left"></div>
							<div class="instruct_btn_right">
								<button class="instructSubmit" @click="basicSubmit">提交</button>
								<button @click="save(1)">上一步</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	// import VueEditor from "vue-word-editor";
	// import "quill/dist/quill.snow.css";
	// import E from 'wangeditor'
	 import { VueEditor } from 'vue2-editor';
import { isArray } from 'util';
	export default {
		data() {
			return {
				loading:false,
				titleIndex:0,
				basic:true,
				limit:false,
				instructions:false,
				couponNames:false,
				text:'立减',
				titleList:['基本','使用限制','使用说明'],
				cateList:[],//商品分类
				cate_tag:'',//选择分类后显示'x'号
				cate_list:[],//选择了的分类项
				time:[],//开始结束日期
				// 表单 - 基本
				formbasic:{
					sort:'',//排序
					name:'',//优惠券名称
					type:'',//分类
					condition:'',//使用条件
					time_type:'',//时间类型
					date:'',//天数
					start_time:'',//开始时间
					end_time:'',//结束时间
					discount_type:'1',//优惠方式
					discount_money:'',//优惠金额
					num:'',//发行总数
					rule_type:'',//使用限制
					is_cate_limit:'',//是否限制商品分类使用
					cate_lst:[],//选择商品分类
					is_product_limit:'',//是否限制商品使用
					product_lst:[],//选择商品
					unified:false,
					content:'',//使用说明
				},
				// 富文本配置
				// config: {
				//       // 上传图片的配置
				//       uploadImage: {
				//         url: "http://localhost:8080/upload",
				//         name: "file",
				//         // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
				//         uploadSuccess(res, insert){
				//           insert("http://localhost:8080" + res.data.url)
				//         }
				//       },
				  	 
				//       // 上传视频的配置
				//       uploadVideo: {
				//         url: "http://localhost:8080/upload",
				//         name: "file",
				//         uploadSuccess(res, insert){
				//           insert("http://localhost:8080" + res.data.url)
				//         }
				//      },
				// }
			}
		},
		mounted(){
			this._getCateList()
		},
		methods: {

			//富文本上传图片
			 handleImageAdded(file,Editor,cursorLocation){
				//上传图片操作
				console.log(file);
				//把获取到的图片url 插入到鼠标所在位置 回显图片
				Editor.insertEmbed(cursorLocation, 'image', url);
			} ,
			
			handerBase() {
				this.$router.go(-1)
			},
			tabTitle(i) {
				this.titleIndex = i;
				console.log(i);
				if(i == 0) {
					this.basic = true;
					this.limit = false;
					this.instructions = false;
				}else if(i == 1) {
					this.basic = false;
					this.limit = true;
					this.instructions = false;
				}else if(i == 2) {
					this.basic = false;
					this.limit = false;
					this.instructions = true;
				}
			},
			//下一步上一步
			save(i){
				this.tabTitle(i)
			},
			handerCouponName() {
				if(this.formbasic.couponName == '') {
					this.couponNames = true;
				}else {
					this.couponNames = false;
				}
			},
			handerRadio() {
				this.text = this.formbasic.discount_type=='1'?'立减':this.formbasic.discount_type=='2'?'打折':this.formbasic.discount_type=='3'?'返利':'';
			},
			basicSubmit() {
				console.log(this.formbasic);
			},
			//选择商品分类
			_pickCate(e) {
				console.log(e);
				this.cate_list.push(e.target.innerText);
				// this.cate_tag = e.target.dataset.index
				let setArr = Array.from(new Set(this.cate_list)) //分类 去重
				let k = isArray(setArr)
				console.log(setArr);
			},
			//获取商品分类列表
			_getCateList(){
				this.$http.post('/api/admin/shop/Cate/cateLst',{}).then(res => {
					if(res.code == 1) {
						this.cateList = res.data?res.data:[];
						// console.log(this.cateList);
					}
			})
			},

			//新增提交按钮
			basicSubmit(){
				// console.log(this.formbasic);
				// this.formbasic.start_time = this.time?this.time[0].getTime():'';
				// this.formbasic.end_time = this.time?this.time[1].getTime():'';
				// console.log(this.formbasic.start_time);
				// console.log(this.formbasic.end_time);
				this.formbasic.cate_lst = this.formbasic.cate_lst?this.formbasic.cate_lst.join(','):'';
				// this.formbasic.product_lst = this.formbasic.product_lst?this.formbasic.product_lst.join(','):'';
				console.log(this.formbasic.cate_lst);
				// console.log(this.formbasic.product_lst);
				// this.formbasic.store_id = '1'
				// console.log(this.formbasic.product_lst);

				// this.$http.post('/api/admin/shop/store/addCoupon',this.formbasic).then(res=>{
				// 	console.log(res);
				// })
			
			}
			
		},
		components: {
		  VueEditor
		},
	}
</script>

<style lang="less" scoped="scoped">
	@import 'newCoupons.less';
</style>
